<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>手把手教你制作酷炫Web全景</title>
  <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
</head>
<body>
<div id="wrap" style="position: absolute;z-index: 0;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;overflow: hidden;">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.js"></script>
<script>
  const width = window.innerWidth
  const height = window.innerHeight
  const radius = 500 // 球体半径

  // 第一步：创建场景
  const scene = new THREE.Scene()

  // 第二步：绘制一个球体
  // const geometry = new THREE.SphereBufferGeometry(radius, 32, 32)
  // const material = new THREE.MeshBasicMaterial({
  //   map: new THREE.TextureLoader().load('./img/1.jpeg') // 上面的全景图片
  // })
  // const mesh = new THREE.Mesh(geometry, material)
  // scene.add(mesh)

  const geometry = new THREE.SphereGeometry( 15, 32, 16 );
  const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
  const sphere = new THREE.Mesh( geometry, material );
  scene.add( sphere );

  // 第三步：创建相机，并确定相机位置
  const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100)
  camera.position.x = 0  // 确定相机位置
  camera.position.y = 0
  camera.position.z = 100

  camera.target = new THREE.Vector3(radius, 0, 0) // 设定对焦点


  // 第四步：拍照并绘制到canvas
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(width, height) // 设置照片大小

  document.querySelector('#wrap').appendChild(renderer.domElement) // 绘制到canvas

  function render() {
    camera.lookAt(camera.target)   // 对焦
    renderer.render(scene, camera) // 拍照

    // 不断渲染，因为图片加载和处理需要时间，不确定何时拍照合适
    requestAnimationFrame(render)
  }
  render()
</script>
</body>

</html>